import React, { Component } from 'react';
import store from './store'
import { getInputChangeAction, getListChangeAction, deleteListItemAction } from './store/actionCreators'
import TodoListUI from './TodoListUI'

class TodoListAnt extends Component {

    constructor(props) {
        super(props);
        this.state = store.getState();
        this.handleInputChange = this.handleInputChange.bind(this);
        this.handleStoreChange = this.handleStoreChange.bind(this);
        this.handleValueSubmit = this.handleValueSubmit.bind(this);
        this.handleItemDelete = this.handleItemDelete.bind(this);
        store.subscribe(this.handleStoreChange)
    };

    render() {
        return (
            <TodoListUI
                inputValue={this.state.inputValue}
                list={this.state.list}
                handleInputChange={this.handleInputChange}
                handleValueSubmit={this.handleValueSubmit}
                handleItemDelete={this.handleItemDelete}
            />
        );
    };

    handleStoreChange() {
        this.setState(store.getState());
    };

    handleInputChange(e) {
        const action = getInputChangeAction(e.target.value);
        store.dispatch(action);
    };

    handleValueSubmit() {
        const action = getListChangeAction(this.state.inputValue);
        store.dispatch(action);
    };

    handleItemDelete(index) {
        const action = deleteListItemAction(index);
        store.dispatch(action);
    };

};

export default TodoListAnt;